<template>
  <div>
    <div class="right-tool" v-if="isShowRightToolbar">
      <RightToolbar
        @queryTable="queryTable"
        :columns="tableConfig"
      ></RightToolbar>
    </div>
    <el-form
      class="base-form"
      ref="baseForm"
      :rules="tableFromRules"
      :model="baseForm"
    >
      <el-table
        v-if="isShowTable"
        ref="tableComponentsRef"
        style="width: 100%"
        :data="baseForm.tableList"
        :border="tableBaseConfig.border"
        :stripe="tableBaseConfig.stripe"
        :height="tableBaseConfig.height"
        :indent="tableBaseConfig.indent"
        :header-cell-style="tableBaseConfig.headerStyle"
        :show-header="tableBaseConfig.showHeader"
        :highlight-current-row="tableBaseConfig.showHighlightRow"
        :default-expand-all="treeConfig.defaultExpandAll"
        :tree-props="treeConfig.treeProps"
        :expand-row-keys="treeConfig.expandRowKeys"
        :row-key="rowKey"
        :cell-style="tableBaseConfig.cellStyle"
        :size="sizeTable"
        :max-height="tableBaseConfig.maxHeight"
        @selection-change="handleSelectionChange"
        @select="rowSelect"
        @select-all="selectAll"
        @row-click="handleRowClick"
      >
        <!-- 选择 -->
        <el-table-column
          v-if="isSelect"
          type="selection"
          width="55"
          align="center"
          reserve-selection
        />
        <!-- 序号 -->
        <el-table-column
          v-if="isIndex"
          width="60"
          label="序号"
          align="center"
          fixed="left"
        >
          <template #header>
            <div class="headerStyle">序号</div>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isPageIndex"
          width="60"
          label="序号"
          align="left"
          fixed="left"
        >
          <template #header>
            <div class="headerStyle">序号</div>
          </template>
          <template slot-scope="scope">
            <span>{{
              scope.$index +
              (queryParams.currentPage - 1) * queryParams.pageSize +
              1
            }}</span>
          </template>
        </el-table-column>
        <!-- 正常行 start -->
        <template v-for="(item, index) in tableConfig">
          <el-table-column
            :key="item.prop"
            v-if="isShowRightToolbar ? tableConfig[index].visible : true"
            :label="item.label"
            :width="item.width"
            :sortable="item.sortable && true"
            :align="item.align ? item.align : 'center'"
            :fixed="item.fixed || false"
            :show-overflow-tooltip="
              item.showTooltip ? item.showTooltip() : true
            "
          >
            <template #header>
              <el-tooltip
                placement="top"
                title=""
                :content="item.label"
                :offset="15"
              >
                <div class="headerStyle">{{ item.label }}</div>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <!-- 正常可操作表格 -->
              <template
                v-if="
                  (scope.row.isHandle && item.isEdit) ||
                  tableBaseConfig.isEdit === 'always'
                "
              >
                <el-form-item
                  :prop="'tableList.' + scope.$index + '.' + item.prop"
                  :rules="tableFromRules[item.prop]"
                >
                  <!-- input type-->
                  <el-input
                    v-if="item.isType === 'Input'"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    :size="item.size || 'small'"
                    :clearable="item.clearable || true"
                    :disabled="item.disabled"
                    @input="item.method && item.method(scope.row, item.prop)"
                  ></el-input>
                  <el-input-number
                    v-if="item.isType === 'InputNum'"
                    v-model="scope.row[item.prop]"
                    :label="item.label"
                    :size="item.size || 'small'"
                    :clearable="item.clearable || true"
                    @input="item.method && item.method(scope.row, item.prop)"
                  ></el-input-number>
                  <!-- select type-->
                  <el-select
                    v-if="item.isType === 'Select'"
                    style="width: 100%"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    :size="item.size || 'small'"
                    :clearable="item.clearable || true"
                    :multiple="item.multiple"
                    :remote="item.remote"
                    :remote-method="item.remoteMethod"
                    :collapse-tags="item.collapseTags"
                    :multiple-limit="item.multipleLimit"
                    :filterable="item.filterable"
                    @change="item.method && item.method(scope.row, item.prop)"
                  >
                    <el-option
                      v-for="(opItem, index) in item.options"
                      :key="index"
                      :label="opItem.label"
                      :value="opItem.value"
                      @click.native="
                        item.click && item.click(scope.row, opItem.options)
                      "
                    >
                      <template v-if="opItem.rightHint">
                        <span style="float: left">{{ opItem.label }}</span>
                        <span
                          style="float: right; color: #8492a6; font-size: 16px"
                        >
                          {{ opItem.rightHint }}
                        </span>
                      </template>
                      <template v-else>
                        {{ opItem.label }}
                      </template>
                    </el-option>
                  </el-select>
                  <!-- date type -->
                  <el-date-picker
                    v-if="item.isType === 'Date'"
                    :type="item.isDateType || 'date'"
                    style="width: 100%"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    :size="item.size || 'small'"
                    :clearable="item.clearable || true"
                    :format="item.format || 'yyyy-MM-dd'"
                    :value-format="item.valueFormat || 'yyyy-MM-dd'"
                    @change="item.method(scope.row, item.prop)"
                  ></el-date-picker>
                  <!-- radio type -->
                  <el-radio-group
                    v-if="item.isType === 'Radio'"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    :size="item.size || 'small'"
                    :clearable="item.clearable || true"
                    @change="item.method(scope.row, item.prop)"
                  >
                    <el-radio
                      :label="opItem.label"
                      v-for="(opItem, index) in item.options"
                      :key="index"
                      :rules="item.rules"
                    ></el-radio>
                  </el-radio-group>
                  <!-- switch type -->
                  <el-switch
                    v-if="item.isType === 'Switch'"
                    class="switch-btn-style"
                    v-model="scope.row[item.prop]"
                    :clearable="item.clearable || true"
                    :size="item.size || 'small'"
                    :active-color="variables.switchActiveColor"
                    :inactive-color="variables.switchInactiveColor"
                    :active-icon-class="variables.switchActiveIconClass"
                    :active-text="item.activeText"
                    :inactive-text="item.inactiveText"
                    @change="item.method && item.method()"
                  ></el-switch>
                  <slot
                    v-if="item.isType === 'Slot'"
                    :name="item.prop"
                    :row="scope.row"
                  ></slot>
                  <span v-if="item.isHandleBtn === 'Link'" class="m-l-10">
                    <el-link
                      :underline="false"
                      :type="item.isHandleType"
                      @click.native.prevent="
                        item.isHandleMethod(scope.row, index)
                      "
                    >
                      {{ item.isHandleText }}
                    </el-link>
                  </span>
                </el-form-item>
              </template>
              <!-- 普通表格 -->
              <template v-else>
                <!--有图片序号图片-->
                <div v-if="item.imageIndex" style="width: 100%">
                  <!-- <img src="@/assets/img/404_cloud.png" />
                {{ item.imageIndex(scope.row)[scope.$index] }} -->
                  <img
                    v-if="item.imageIndex(scope.row)[scope.$index]"
                    :src="item.imageIndex(scope.row)[scope.$index]"
                    :alt="item.alt"
                  />
                  <span v-else>{{ scope.$index + 1 }}</span>
                </div>
                <!-- slot -->
                <slot
                  v-else-if="item.isSlot"
                  :name="item.prop"
                  :row="scope.row"
                ></slot>
                <!-- 如果是链接 -->
                <el-link
                  v-else-if="item.isLink"
                  :underline="false"
                  :type="item.type"
                  @click.native.prevent="item.method(scope.row, index)"
                >
                  {{
                    scope.row[item.prop] || scope.row[item.prop] == 0
                      ? scope.row[item.prop]
                      : "---"
                  }}
                </el-link>
                <!-- 如果是button -->
                <el-button
                  v-else-if="item.isButton"
                  :size="item.size || 'mini'"
                  :type="item.type"
                  :disable="item.disable ? item.disable(scope.row) : false"
                  :plain="item.plain || false"
                  :round="item.round || false"
                  :icon="item.icon || ''"
                  :circle="item.circle || false"
                  @click.native.prevent="item.method(scope.row, index)"
                >
                  {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                </el-button>
                <!-- 如果是tag -->
                <el-tag
                  v-else-if="item.isTag"
                  :size="item.size || 'mini'"
                  :type="item.type"
                  >{{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                </el-tag>
                <!-- 如果是tagType -->
                <el-tag
                  class="cursor"
                  v-else-if="item.isTagType"
                  :size="item.isTagType(scope.row).size || 'mini'"
                  :type="item.isTagType(scope.row).type"
                  @click="item.method(scope.row, index)"
                  >{{ item.isTagType(scope.row).name || "---" }}
                </el-tag>
                <!-- 如果有 icon -->
                <span v-else-if="item.isArrow">
                  <span>
                    <i
                      :class="[
                        item.isArrow(scope.row).icon,
                        item.isArrow(scope.row).color,
                      ]"
                    ></i>
                  </span>
                  <span :class="item.isArrow(scope.row).color"
                    >{{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                  </span>
                </span>
                <!-- 状态前圆点 -->
                <span v-else-if="item.isStatus">
                  <span
                    class="circle"
                    :class="item.isStatus(scope.row).bgColor"
                  ></span
                  >&nbsp;&nbsp;
                  <span :class="item.isStatus(scope.row).color">
                    {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                  </span>
                </span>
                <!-- 状态前圆点可以切换字段展示 -->
                <span v-else-if="item.isStatusDouble">
                  <span
                    class="circle"
                    :class="item.isStatusDouble(scope.row).bgColor"
                  ></span
                  >&nbsp;&nbsp;
                  <span :class="item.isStatusDouble(scope.row).color">
                    {{ item.isStatusDouble(scope.row).label }}
                  </span>
                </span>
                <!--颜色字体 -->
                <span v-else-if="item.isColor">
                  <span :class="item.isColor(scope.row)">
                    {{ scope.row[item.prop] ? scope.row[item.prop] : "---" }}
                  </span>
                </span>
                <!-- 进度条 -->
                <div v-else-if="item.isProgress" style="width: 100%">
                  <el-progress
                    :percentage="
                      scope.row[item.prop] ? Number(scope.row[item.prop]) : 0
                    "
                    :color="item.isProgress"
                  ></el-progress>
                  <!-- <span>{{scope.row[item.prop]}}</span> -->
                </div>
                <div v-else-if="item.popOver">
                  <el-popover
                    v-if="item.popOver(scope.row).isPop"
                    :title="item.popOver(scope.row).title"
                    :trigger="item.popOver(scope.row).trigger || 'click'"
                  >
                    <p
                      style="position: relative"
                      v-for="item in item.popOver(scope.row).content"
                      :key="item"
                    >
                      <span class="round"></span>{{ item }}
                    </p>

                    <el-button slot="reference" type="text">
                      <svg-icon
                        class="svg-icon iconStyle"
                        style="margin-right: 8px"
                        :icon-class="item.popOver(scope.row).iconClass"
                      />{{ item.popOver(scope.row).name || "--" }}</el-button
                    >
                  </el-popover>
                  <span v-else>
                    <svg-icon
                      class="svg-icon iconStyle"
                      style="margin-right: 8px"
                      :icon-class="item.popOver(scope.row).iconClass"
                    />{{ item.popOver(scope.row).name || "--" }}</span
                  >
                </div>
                <!-- 嵌套内容 -->
                <span v-else-if="item.showProp">
                  {{ item.showProp(scope.row) }}
                </span>
                <span v-else-if="item.showHint">
                  {{ item.showHint(scope.row).name || "--" }}
                </span>
                <span v-else-if="item.showArr">
                  <p
                    v-for="(item, index) in item.showArr(scope.row).arr"
                    :key="item"
                  >
                    {{ index + 1 }}、{{ item }}
                  </p>
                </span>
                <span v-else-if="item.showArrMethod">
                  <p
                    class="m-b cursor"
                    v-for="(items, index) in item.showArrMethod(scope.row).arr"
                    :key="index"
                    @click="item.method && item.method(items)"
                  >
                    <span class="blue">{{ index + 1 }}、{{ items.name }}</span>
                  </p>
                </span>
                <!-- 无内容时显示 -->
                <span v-else>
                  {{
                    scope.row[item.prop] || scope.row[item.prop] == 0
                      ? scope.row[item.prop]
                      : "---"
                  }}
                </span>
              </template>
            </template>
          </el-table-column>
        </template>
        <!-- 正常行 end -->
        <!-- 操作 start -->
        <el-table-column
          v-if="
            tableAction &&
            tableAction.operations &&
            tableAction.operations.length > 0
          "
          label="操作"
          align="center"
          :width="tableAction.width ? tableAction.width() : null"
        >
          <template #header>
            <div class="headerStyle">操作</div>
          </template>
          <template slot-scope="scope">
            <span v-for="(item, index) in tableAction.operations" :key="index">
              <slot
                v-if="item.isSlot"
                :name="item.prop"
                :row="scope.row"
              ></slot>
              <span
                class="item-btn"
                v-else-if="
                  item.isShow
                    ? item.isShow(scope.row, scope.$index)
                    : item.isShow
                    ? item.isShow()
                    : true
                "
              >
                <el-link
                  v-if="item.isLink"
                  :underline="false"
                  :type="item.type"
                  :disable="item.disable ? item.disable(scope.row) : false"
                  @click.native.prevent="item.method(scope.row, scope.$index)"
                >
                  {{ item.label }}
                </el-link>
                <el-dropdown v-else-if="item.dropdown">
                  <span class="el-dropdown-link">
                    {{ item.label
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(items, keyS) in item.dropArr"
                      :key="keyS"
                      @click.native.prevent="items.method(scope.row, index)"
                      ><div
                        v-if="items.isShow ? items.isShow(scope.row) : true"
                      >
                        <span
                          v-if="items.type == 'danger'"
                          style="color: red"
                          >{{ items.name }}</span
                        ><span v-else style="color: #5272ec">{{
                          items.name
                        }}</span>
                      </div></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button
                  class="item-btn"
                  v-else
                  :size="item.size || 'mini'"
                  :type="item.type"
                  :disable="item.disable ? item.disable(scope.row) : false"
                  :plain="item.plain || false"
                  :round="item.round || false"
                  :icon="item.icon || ''"
                  :circle="item.circle || false"
                  @click.native.prevent="item.method(scope.row, index)"
                >
                  {{ item.label }}
                </el-button>
              </span>
            </span>
          </template>
        </el-table-column>
        <!-- 操作 end -->
      </el-table>
    </el-form>
    <div class="text-center btn-border" v-if="isAdd" @click="addFun">
      <el-button type="text" icon="el-icon-plus">添加</el-button>
    </div>
    <pagination
      v-show="isShowPage && queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      :alignStyle="queryParams.alignStyle"
      @pagination="getPagination"
    />
  </div>
</template>

<script>
import variables from "@/assets/scss/common.scss";
export default {
  props: {
    isAdd: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: String,
      default: "auto",
    },
    sizeTable: {
      type: String,
      default: "medium",
    },
    // 有分页序号
    isPageIndex: {
      type: Boolean,
      default: false,
    },
    // 没分页的序号
    isIndex: {
      type: Boolean,
      default: false,
    },
    isShowRightToolbar: {
      type: Boolean,
      default: false,
    },
    // 展示分页
    isShowPage: {
      type: Boolean,
      default: false,
    },
    // 分页信息
    queryParams: {
      type: Object,
      default: () => ({
        total: 0,
      }),
    },
    // 是否选择
    isSelect: {
      type: Boolean,
      default: false,
    },
    // 列表数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表格校验
    tableFromRules: [Object],
    // 表头配置
    tableConfig: {
      type: Array,
      default: () => [],
    },
    // 操作
    tableAction: {
      type: Object,
      default: () => ({}),
    },
    // 树结构
    treeConfig: {
      type: Object,
      default: () => ({}),
    },
    // 行key值
    rowKey: {
      type: String,
      default: () => "id",
    },
    // 表格属性的对象
    tableBaseConfig: {
      type: Object,
      default: () => {
        return {
          stripe: true,
          border: true,
          height: null,
          indent: 16,
          headerStyle: {
            background: "rgb(243, 244, 247)",
            color: "rgb(0, 0, 0)",
          },
        };
      },
    },
  },
  watch: {
    tableData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.baseForm.tableList = this.tableData;
          //
          this.$refs.tableComponentsRef.doLayout();
        });
      },
    },
  },
  computed: {
    variables() {
      return variables;
    },
  },
  created() {},
  mounted() {
    window.addEventListener("resize", this.handleResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  data() {
    return {
      isShowTable: true,
      baseForm: {
        tableList: this.tableData || [],
      },
      rules: {},
    };
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        if (this.$refs.tableComponentsRef) {
          this.$refs.tableComponentsRef.doLayout();
        }
      });
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    rowSelect(selection, row) {
      this.$emit("rowSelect", selection, row);
    },
    selectAll(val) {
      this.$emit("selectAll", val);
    },
    handleRowClick(row) {
      this.$emit("handleRowClick", row);
    },

    clearSelection() {
      this.$refs.tableComponentsRef.clearSelection();
    },
    toggleRowSelection(row) {
      this.$refs.tableComponentsRef.toggleRowSelection(row);
    },
    setCurrentRow(row) {
      this.$refs.tableComponentsRef.setCurrentRow(row);
    },
    getPagination() {
      this.$emit("getPagination");
    },
    addFun() {
      this.$emit("add");
    },
    // 刷新
    queryTable() {
      this.$emit("queryTable");
    },
    submitForm() {
      return new Promise((resolve) => {
        this.$refs.baseForm.validate((valid, hints) => {
          resolve({ valid, hints });
        });
      });
    },
    // 清空校验
    clearForm() {
      this.$refs.baseForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.item-btn {
  margin-right: 10px;
  // &:first-child {
  //   margin-left: 0;
  // }
}
.right-tool {
  position: absolute;
  right: 0;
  top: 0px;
}
// .text-center {
//   text-align: center;
// }

.btn-border {
  border-bottom: 2px dotted #ebeef5;
  border-left: 2px dotted #ebeef5;
  border-right: 2px dotted #ebeef5;
}
.headerStyle {
  text-align: center;
}
.round {
  background-color: #ccc;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
}
.el-dropdown-link {
  color: #5272ec;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.iconStyle {
  width: 16px;
  height: 20px;
  position: relative;
  top: 4px;
}
.cursor {
  cursor: pointer;
}
.blue {
  color: #5272ec;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
